<template>
	<mu-paper :z-depth="1" class="loadmore-wrap">
		<div :style="immerStyle"></div>
		<mu-appbar color="teal">
			<mu-button icon slot="left" @click="openSearch()">
				<mu-icon value="search"></mu-icon>
			</mu-button>
			待回收
			<mu-button icon slot="right">
				<mu-icon value="fullscreen"></mu-icon>
			</mu-button>
			<mu-button icon slot="right" @click="refresh()">
				<mu-icon value="refresh"></mu-icon>
			</mu-button>
		</mu-appbar>
		<mu-container ref="container" class="loadmore-content">
			<mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
				<mu-list>
					<template v-for="i in num">
						<mu-list-item :ripple="true" @click="openList()" button>
							<mu-paper>
								<mu-button small flat :disabled="true">
									<mu-icon left value="dashboard"></mu-icon>
									案件号：92500032008333786092344
								</mu-button>
								<div class="tb_line"></div>
							</mu-paper>
							<mu-list-item-action>
								<img src="../../assets/img/1.jpg">
							</mu-list-item-action>
							<mu-list-item-content>
								<mu-list-item-sub-title>
									<span style="color: rgba(0, 0, 0, .87)">厂牌车型：雪佛兰SGM7189ATA轿车</span>
								</mu-list-item-sub-title>
								<mu-list-item-sub-title>
									<span style="color: rgba(0, 0, 0, .87)">回收公司 ：合肥红月汽车服务有限责任公司</span>
								</mu-list-item-sub-title>
								<mu-list-item-sub-title>
									<span style="color: rgba(0, 0, 0, .87);font-weight: 600;">车牌号：&nbsp;&nbsp;皖AK5K10</span>
								</mu-list-item-sub-title>
								<mu-list-item-sub-title>
									<span style="color: rgba(0, 0, 0, .87)">创建时间 ：2018-7-20 14:16:46</span>
								</mu-list-item-sub-title>
							</mu-list-item-content>
						</mu-list-item>
					</template>
				</mu-list>
			</mu-load-more>
		</mu-container>
	</mu-paper>

</template>

<script>
	import Vue from "vue";
	import '../../utils/common';
	import { immersed } from "@/utils/immersed.js";
	import { openWebview,openWebviewFast } from "@/utils/webview";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);
	
	export default {
		data() {
			return {
				num: 10,
				refreshing: false,
				loading: false,
				text: 'List',
				immerStyle: {
					width: '100%',
					height: window.immersed + 'px',
					backgroundColor: 'rgb(0, 150, 136)'
				}
			}
		},
		methods: {
			refresh() {
				this.refreshing = true;
				this.$refs.container.scrollTop = 0;
				setTimeout(() => {
					this.refreshing = false;
					this.text = this.text === 'List' ? 'Menu' : 'List';
					this.num = 10;
				}, 2000)
			},
			load() {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.num += 10;
				}, 2000)
			},
			openSearch() {
				// 重写了标题样式
				openWebview({
					url: "./search.index.html",
					id: "search.index"
				}, {
					titleNView: {
						backgroundColor: '#009688', // 导航栏背景色
						titleText: "案件查找", // 导航栏标题
						titleColor: "#fff", // 文字颜色
						// type: "transparent", // 透明渐变样式
						autoBackButton: true, // 自动绘制返回箭头
						splitLine: {
							// 底部分割线
							color: "#cccccc"
						}
					},
					bounce:'vertical'
				}, {
					type: 'task'
				});

			},
			openList() {
				openWebviewFast(
					 "./index.list.html",
					"index.list",
					"待回收"
				);

			}
		}
	};
</script>

<style lang="less">
	.loadmore-wrap {
		width: 100%;
		max-width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F1F1F1;
		.mu-appbar {
			width: 100%;
			height: 52px;
		}
	}
	
	.loadmore-content {
		flex: 1;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.mu-item {
		height: 180px;
		margin-bottom: 10px;
		background-color: #fff;
		padding: 0 5px;
		padding-top: 40px;
		.mu-paper {
			position: absolute;
			left: 0;
			top: 0px;
			font-weight: bold;
			background-color: rgba(0, 0, 0, 0);
			width: 100%;
			text-indent: 2px;
			.mu-flat-button.mu-button-small {
				color: #333;
				font-size: 14px;
				height: 28px;
				margin: 8px 0 4px;
				.mu-icon-left {
					margin-top: -2px;
				}
			}
			.tb_line {
				border: none;
				border-bottom: 1px solid #e1e3e5;
				height: 1px;
				transform: scaleY(0.5);
				transform-origin: 0 0;
				-webkit-transform: scaleY(0.5);
				-webkit-transform-origin: 0 0;
			}
		}
		.mu-item-action {
			width: 40%;
			overflow: hidden;
			max-height: 116px;
			img {
				width: 100%;
				border-radius: 1px;
			}
		}
		.mu-item-content {
			margin-left: 8px;
			position: relative;
			.mu-item-sub-title {
				font-size: 12px;
				line-height: 25px;
			}
		}
	}
</style>